<template>
  <div class="looker" v-loading="loading">
    <div class="header">
      <div class="date">
        <span>{{ srcs[currentSrcIndex].date }}</span>
      </div>
      <div class="close btn" @click="this.$emit('close')">
        <span class="icon">✖️</span>
      </div>
    </div>
    <div class="looker-inner">
      <img :src="activeSrc" @load="() => (loading = false)" @error="() => (loading = false)" />
    </div>
    <div class="img-handle">
      <div v-if="btnSeen" class="btn left" @click="backwardLook">
        <span class="icon">◀</span>
      </div>
      <div class="tip">
        <div
          :class="['tip-item', k === currentSrcIndex ? 'active' : '']"
          v-for="(item, k) in srcs"
          :key="k.src"
        ></div>
      </div>
      <div v-if="btnSeen" class="btn right" @click="towardLook">
        <span class="icon">▶</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Looker',
  props: {
    srcs: {
      type: Array,
      default: () => {
        return [
          {
            date: '2024-01-01',
            src: 'https://md-1301600412.cos.ap-nanjing.myqcloud.com/pic/image-20220328152305216.png',
          },
        ];
      },
    },
  },
  data() {
    return {
      currentSrcIndex: 0,
      loading: true,
    };
  },
  computed: {
    btnSeen() {
      return this.srcs.length > 1;
    },
    activeSrc() {
      return this.srcs[this.currentSrcIndex].src;
    },
  },
  methods: {
    towardLook() {
      this.loading = true;
      if (this.currentSrcIndex < this.srcs.length - 1) {
        this.currentSrcIndex += 1;
      } else {
        this.currentSrcIndex = 0;
      }
    },
    backwardLook() {
      this.loading = true;
      if (this.currentSrcIndex > 0) {
        this.currentSrcIndex -= 1;
      } else {
        this.currentSrcIndex = this.srcs.length - 1;
      }
    },
  },
};
</script>

<style scoped lang="less">
@--btn-size: 0.8rem;
@--btn-color: rgb(18, 150, 219);
.looker {
  display: flex;
  z-index: 1000;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: #fff;
  .looker-inner {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2vw;
    img {
      flex: 1;
      display: block;
      width: 100%;
      min-height: 50%;
      margin: 0 auto;
      border-radius: 0.5vw;
      background-color: #e7e6e6a1;
    }
  }
  .btn {
    width: 6vw;
    z-index: 999;
    padding: 1vw;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .icon {
      font-size: 6vw;
      color: @--btn-color;
      &:active,
      &:hover {
        transform: scale(1.2);
      }
    }
  }
  .img-handle {
    position: absolute;
    left: 0%;
    bottom: 5vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3vw;
    width: inherit;
    padding: 10px 20px;
    box-sizing: border-box;
    .tip {
      flex: 1;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      .tip-item {
        width: 2vw;
        height: 2vw;
        margin: 0.5vw;
        border-radius: 1vw;
        background: rgb(238, 238, 239);
        &.active {
          background: @--btn-color;
        }
      }
    }
  }
  .header {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 5vw;
    left: 0vw;
    width: 100vw;
    .date {
      width: 100%;
      font-weight: bold;
    }
    .close {
      width: 2vw;
      margin-right: 5vw;
      cursor: pointer;
    }
  }
}
</style>
